<template>
    <div class="bill">
        <slide-tab :top="0">
            <div class="tabItem">
                <ul class='tabClick box'>
                    <li class="active">
                        全部
                    </li>
                    <li>未完成</li>
                    <li>已完成</li>
                </ul>
                <div class='lineBorder'>
                    <div class='lineDiv' :style="{width: 100/3 + '%'}"><!--滑动条--></div>
                </div>
            </div>
            <div class='tabCon'>
                <div class='tabBox'>
                    <div class='tabList'>
                        <div :a="!getComplete(name, item.state || item.FSTATE)" :type="item.expenseType" v-for="(item, index) in data" v-if="(name !== '车辆费报销单' ||
                         item.expenseType === 'car') && (name !== '其他费用报销单' ||
                         item.expenseType === 'other') && (name !== '交通费报销单' ||
                         item.expenseType === 'bus') && (name !== '通讯费报销单' ||
                         item.expenseType === 'tel')" class="card box"
                             @click="goToDetail(item.name, item.num || item.number || item.FNUMBER, item.cause ||
                             item.FCAUSE, item.state || item.FSTATE, item.amount || item.FAMOUNT, item.conFormat)">
                            <div class="left">
                                <img :src="icon" class="icon">
                            </div>
                            <div class="main box-f1">
                                <div class="upper clear">
                                    <div class="title ell-2 fl" v-if="name ==='差旅报销单'">{{item.FCAUSE}}</div>
                                    <div class="title ell-2 fl" v-else>{{item.cause}}</div>
                                    <div class="date fr" v-if="name ==='出差申请单'">{{item.createtime.substring(0, 10)}}
                                    </div>
                                    <div class="date fr" v-if="name ==='差旅报销单'">{{item.FBILLDATE.substring(0, 10)}}
                                    </div>
                                    <div class="date fr" v-if="item.billDate && item.billDate.length > 10">{{item.billDate.substring(0, 10)}}
                                    </div>
                                    <div class="date fr" v-else>{{item.billDate}}</div>
                                </div>
                                <div class="lower clear">
                                    <div class="subtitle fl" v-if="name ==='出差申请单'">目的地：{{item.to}}</div>
                                    <div class="subtitle fl" v-if="name ==='差旅报销单'">金额：¥{{item.FAMOUNT}}</div>
                                    <div class="subtitle fl" v-if="name !=='出差申请单' && name !=='差旅报销单'">金额：¥{{item.amount}}</div>
                                    <div class="status default fr"
                                         :class="{fail: item.state == '27' || item.state == '80' ||
                                    item.FSTATE == '27' || item.FSTATE == '80'}"
                                         v-if="name ==='差旅报销单'">
                                        {{BILLSTATE[item.FSTATE]}}
                                    </div>
                                    <div class="status default fr"
                                         :class="{fail: item.state == '27' || item.state == '80' ||
                                    item.FSTATE == '27' || item.FSTATE == '80'}"
                                         v-else>
                                        {{BILLSTATE[item.state]}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="load-more" v-if="showType === 1 && !$store.state.isLoading" @click="getList(2)">加载全部</div>
                        <empty :flag="dataEmpty"></empty>
                    </div>
                    <div class='tabList'>
                        <div v-for="(item, index) in data" class="card box uncomplete"
                             @click="goToDetail(item.name, item.num || item.number || item.FNUMBER, item.cause ||
                             item.FCAUSE, item.state || item.FSTATE, item.amount || item.FAMOUNT, item.conFormat)"
                             v-if="!getComplete(name, item.state || item.FSTATE) &&
                            (name !== '车辆费报销单' ||
                         item.expenseType === 'car') && (name !== '其他费用报销单' ||
                         item.expenseType === 'other') && (name !== '交通费报销单' ||
                         item.expenseType === 'bus') && (name !== '通讯费报销单' ||
                         item.expenseType === 'tel')">
                            <div class="left">
                                <img :src="icon" class="icon">
                            </div>
                            <div class="main box-f1">
                                <div class="upper clear">
                                    <div class="title ell-2 fl" v-if="name ==='差旅报销单'">{{item.FCAUSE}}</div>
                                    <div class="title ell-2 fl" v-else>{{item.cause}}</div>
                                    <div class="date fr" v-if="name ==='出差申请单'">{{item.createtime.substring(0, 10)}}
                                    </div>
                                    <div class="date fr" v-if="name ==='差旅报销单'">{{item.FBILLDATE.substring(0, 10)}}
                                    </div>
                                    <div class="date fr" v-else>{{item.billDate}}</div>
                                </div>
                                <div class="lower clear">
                                    <div class="subtitle fl" v-if="name ==='出差申请单'">目的地：{{item.to}}</div>
                                    <div class="subtitle fl" v-if="name ==='差旅报销单'">金额：¥{{item.FAMOUNT}}</div>
                                    <div class="subtitle fl" v-if="name !=='出差申请单' && name !=='差旅报销单'">金额：¥{{item.amount}}</div>
                                    <div class="status default fr"
                                         :class="{fail: item.state == '27' || item.state == '80' ||
                                    item.FSTATE == '27' || item.FSTATE == '80'}"
                                         v-if="name ==='差旅报销单'">
                                        {{BILLSTATE[item.FSTATE]}}
                                    </div>
                                    <div class="status default fr"
                                         :class="{fail: item.state == '27' || item.state == '80' ||
                                    item.FSTATE == '27' || item.FSTATE == '80'}"
                                         v-else>
                                        {{BILLSTATE[item.state]}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <empty :flag="uncompleteEmpty"></empty>
                    </div>
                    <div class='tabList'>
                        <div v-for="(item, index) in data" class="card box complete"
                             @click="goToDetail(item.name, item.num || item.number || item.FNUMBER, item.cause ||
                             item.FCAUSE, item.state || item.FSTATE, item.amount || item.FAMOUNT, item.conFormat)"
                             v-if="getComplete(name, item.state || item.FSTATE) &&
                            (name !== '车辆费报销单' ||
                         item.expenseType === 'car') && (name !== '其他费用报销单' ||
                         item.expenseType === 'other') && (name !== '交通费报销单' ||
                         item.expenseType === 'bus') && (name !== '通讯费报销单' ||
                         item.expenseType === 'tel')">
                            <div class="left">
                                <img :src="icon" class="icon">
                            </div>
                            <div class="main box-f1">
                                <div class="upper clear">
                                    <div class="title ell-2 fl" v-if="name ==='差旅报销单'">{{item.FCAUSE}}</div>
                                    <div class="title ell-2 fl" v-else>{{item.cause}}</div>
                                    <div class="date fr" v-if="name ==='出差申请单'">{{item.createtime.substring(0, 10)}}
                                    </div>
                                    <div class="date fr" v-if="name ==='差旅报销单'">{{item.FBILLDATE.substring(0, 10)}}
                                    </div>
                                    <div class="date fr" v-else>{{item.billDate}}</div>
                                </div>
                                <div class="lower clear">
                                    <div class="subtitle fl" v-if="name ==='出差申请单'">目的地：{{item.to}}</div>
                                    <div class="subtitle fl" v-if="name ==='差旅报销单'">金额：¥{{item.FAMOUNT}}</div>
                                    <div class="subtitle fl" v-if="name !=='出差申请单' && name !=='差旅报销单'">金额：¥{{item.amount}}</div>
                                    <div class="status default fr"
                                         :class="{fail: item.state == '27' || item.state == '80' ||
                                    item.FSTATE == '27' || item.FSTATE == '80'}"
                                         v-if="name ==='差旅报销单'">
                                        {{BILLSTATE[item.FSTATE]}}
                                    </div>
                                    <div class="status default fr"
                                         :class="{fail: item.state == '27' || item.state == '80' ||
                                    item.FSTATE == '27' || item.FSTATE == '80'}"
                                         v-else>
                                        {{BILLSTATE[item.state]}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <empty :flag="completeEmpty"></empty>
                    </div>
                </div>
            </div>
        </slide-tab>
    </div>
</template>

<script>
    import slideTab from '../components/slideTab.vue';
    import empty from '../components/empty.vue';
    import { quickSort } from '../utils/sortArr';
    import { mapState } from 'vuex';
    import moment from 'moment';
    export default {
        components: {
            slideTab,
            empty
        },
        computed: {
            ...mapState(['userNum'])
        },
        data() {
            return {
                name: window.localStorage.getItem('billname'),
                icon: window.localStorage.getItem('billicon'),
                type: window.localStorage.getItem('billtype'),
                data: [],
                originalData: [],
                showType: 1,
                dataEmpty: false,
                uncompleteEmpty: true,
                completeEmpty: true
            };
        },
        methods: {
            goToDetail(name, num, cause, state, money, conFormat) {
                switch (conFormat) {
                case 'strcon':
                    window.localStorage.setItem('conbillname', '战略合同');
                    break;
                case 'consplit':
                    window.localStorage.setItem('conbillname', '合同调整');
                    break;
                case 'addcon':
                    window.localStorage.setItem('conbillname', '补充合同');
                    break;

                }
                if (!cause) {
                    cause = '';
                }
                if (!state) {
                    state = '';
                }
                if (!money) {
                    money = '';
                }
                window.localStorage.setItem('cause', cause);
                window.localStorage.setItem('state', state);
                window.localStorage.setItem('money', money);
                console.log(cause, state, money);

                if (this.name === '出差申请单') {
                    this.$router.push('/travelbilldetail?billNum=' + num);
                } else {
                    this.$router.push('/billdetail?billNum=' + num);
                }
            },
            getComplete(name, state) {
                /* eslint-disable no-unused-vars */
                var arr = [];
                if (name === '借款单') {
                    arr = ['70', '45', '27'];
                } else if (name === '通讯费报销单' || name === '车辆费报销单' ||
                    name === '交通费报销单' || name === '其他费用报销单') {
                    arr = ['70', '45', '27', '80'];
                } else if (name === '差旅报销单') {
                    arr = ['70', '45', '27', '80'];
                } else if (name === '电脑报销单') {
                    arr = ['70', '45', '27'];
                } else if (name === '合同付款单') {
                    arr = ['70', '45', '27'];
                } else if (name === '无合同付款单') {
                    arr = ['70', '45', '27'];
                } else if (name === '费用申请单' || name === '出差申请单' ||
                    name === '电脑申请单' || name === '事项申请单') {
                    arr = ['60', '27'];
                } else if (name === '还款单') {
                    arr = ['135', '155'];
                } else if (name === '合同') {
                    arr = ['27', '175', '28'];
                } else if (name === '合同结算') {
                    arr = ['60', '27'];
                }

                if (arr.indexOf(state.toString()) !== -1) {
                    return true;
                } else {
                    return false;
                }
            },
            isHide() {
                var uncomplete = document.querySelectorAll('.uncomplete');
                var complete = document.querySelectorAll('.complete');
                if (!uncomplete || uncomplete.length === 0) {
                    this.uncompleteEmpty = true;
                } else {
                    this.uncompleteEmpty = false;
                }
                if (!complete || complete.length === 0) {
                    this.completeEmpty = true;
                } else {
                    this.completeEmpty = false;
                }
            },
            emptyLoc() {
                window.localStorage.removeItem('cause');
                window.localStorage.removeItem('state');
                window.localStorage.removeItem('money');
                window.localStorage.removeItem('conbillname');
            },
            changeShowType (type) {
                if (type === 1) {
                    let date1 = moment().add(-20, 'days').format('YYYYMMDD');
                    let data = this.originalData.filter(item => {
                        let billDate = item.billDate || item.FBILLDATE || '';
                        let date2 = billDate.substring(0, 10).replace(/-/g, '');
                        return (+date2) - (+date1) > 0;
                    });
                    this.data = data;
                } else {
                    this.showType = 2;
                    this.$store.commit('isLoading', true);
                    setTimeout(() => {
                        this.data = this.originalData;
                        this.$store.commit('isLoading', false);
                    }, Math.random() * 333 + 333);
                }
            },
            initData () {
                let method = this.LISTARR[this.name];
                let locData = sessionStorage.getItem(method) || localStorage.getItem(method);
                // 优先显示缓存
                if (locData) {
                    let arr = JSON.parse(locData);
                    this.originalData = quickSort(arr, 'billDate', 'FBILLDATE', false);
                    if (this.name === '差旅报销单' || this.name === '出差申请单') {
                        this.originalData = quickSort(arr, 'FBILLDATE', false);
                    } else {
                        this.originalData = quickSort(arr, 'billDate', false);
                    }
                    this.changeShowType(1);
                }
                this.getList(1);
            },
            getList (type) {
                let date1 = moment().add(-60, 'days').format('YYYY-MM-DD');
                let date2 = moment().add(1, 'days').format('YYYY-MM-DD');
                let method = this.LISTARR[this.name];
                let url = this.HOST + '?method=' + method + '&userNum=' + this.userNum + '&unumber=' + this.userNum + '&sessionID=' + this.SESSIONID;
                if (type === 1) {
                    if (this.name === '出差申请单') {
                        url += '&startDay=' + JSON.stringify([date1, date2]);
                    } else {
                        url += '&bizDate=' + JSON.stringify([date1, date2]);
                    }
                }
                this.$http.post(url).then(res => {
                    if (this.name === '差旅报销单' || this.name === '出差申请单') {
                        this.originalData = quickSort(res.data.t, 'FBILLDATE', 'createtime', false);
                    } else {
                        this.originalData = quickSort(res.data.t, 'billDate', false);
                    }
                    if (this.originalData.length === 0) {
                        if (type === 1) {
                            this.getList(2);
                        } else {
                            this.changeShowType(type);
                            this.dataEmpty = true;
                        }
                    } else {
                        localStorage.setItem(method, JSON.stringify(this.originalData));
                        sessionStorage.setItem(method, JSON.stringify(this.originalData));
                        this.changeShowType(type);
                    }
                });
            }
        },
        created() {
            this.initData();
        },
        updated() {
            this.isHide();
        }
    };
</script>

<style lang="less" scoped src="../css/bill.less"></style>
